<template>
  <div class="dashboard">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="top-left">
        <div class="time">{{ currentTime }}</div>
      </div>
      <div class="logo">低空安全管理平台</div>
      <div class="top-right">
        <div class="region">当前防区：扬州市低空监管</div>
      </div>
    </header>

    <!-- 地图容器 -->
    <div id="mapContainer" class="map"></div>

    <!-- 顶部统计栏 -->
    <div class="stats">
      <div class="stat-item">
        <div class="stat-icon" :class="{ animateIcon: true }">🛰️</div>
        <div class="stat-info">
          <div class="stat-label">探测次数</div>
          <div class="stat-number">{{ stats.detect }}</div>

        </div>
      </div>
      <div class="stat-item">
        <div class="stat-icon" :class="{ animateIcon: true }">⚠️</div>
        <div class="stat-info">
          <div class="stat-label">预警次数</div>
          <div class="stat-number">{{ stats.warn }}</div>

        </div>
      </div>
      <div class="stat-item">
        <div class="stat-icon" :class="{ animateIcon: true }">🚨</div>
        <div class="stat-info">
          <div class="stat-label">入侵次数</div>
          <div class="stat-number">{{ stats.invasion }}</div>
        </div>
      </div>
    </div>

    <!-- 左侧功能按钮 -->
    <div class="sidebar">
      <button @click="showDrone">无人机</button>
      <button @click="showRadar">雷达</button>
    </div>

    <!-- 右侧实时无人机 -->
    <div class="right-panel">
      <div class="panel-title">实时无人机</div>
      <ul class="drone-list">
        <li v-for="(drone, index) in drones" :key="index">无人机 {{ index + 1 }}</li>
        <li v-if="drones.length === 0">暂无无人机在线</li>
      </ul>
    </div>

    <!-- 底部信息 -->
    <footer class="footer">
      延迟: {{ latency }} ms | 版本: {{ version }}
    </footer>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      currentTime: "",
      map: null,
      stats: { detect: 1431, warn: 543, invasion: 213 },
      drones: [],
      latency: 28,
      version: "3.2.214.2.17.136.14",
    };
  },
  mounted() {
    // 更新时间
    setInterval(() => {
      this.currentTime = new Date().toLocaleString();
    }, 1000);

    // 初始化高德地图
    this.loadAMap(() => {
      this.map = new window.AMap.Map("mapContainer", {
        zoom: 12,
        center: [119.4129, 32.3942],
        mapStyle: "amap://styles/normal",
      });

      new window.AMap.Marker({
        position: [119.413, 32.393],
        map: this.map,
        title: "扬州机场",
      });
    });
  },
  methods: {
    loadAMap(callback) {
      if (window.AMap) callback();
      else {
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.src =
          "https://webapi.amap.com/maps?v=2.0&key=39c42b93bc24b41e6303e9074eb40197";
        script.onload = callback;
        document.head.appendChild(script);
      }
    },
    showDrone() {
      console.log("点击无人机");
    },
    showRadar() {
      console.log("点击雷达");
    },
  },
};
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  font-family: "Segoe UI", sans-serif;
  color: #fff;
}

/* 地图 */
.map {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 顶部导航 */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to top, rgba(230, 235, 236, 0), rgb(150, 159, 161)); /* 下透明，上渐变色 */
  font-size: 38px;
  color: #214fbe;
  z-index: 10;
}

.header .logo {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}

.header .top-left {
  position: absolute;
  left: 20px;
  top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #fff;
}
.header .top-right {
  position: absolute;
  right: 20px;
  top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #fff;
}

.header .time {
  font-size: 24px;
}

.header .region {
  font-size: 14px;
}


/* 顶部统计栏 */
.stats {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 10;
}

.stat-item {
  display: flex;
  align-items: center;
  background: rgba(26, 59, 139, 0.5); /* 透明蓝色背景 */
  border-radius: 10px;
  padding: 15px 20px;
  min-width: 140px;
  backdrop-filter: blur(5px);
  transition: all 0.3s;
}

.stat-item:hover {
  background: rgba(26, 59, 139, 0.5); /* 透明蓝色背景 */
}

.stat-icon {
  font-size: 28px;
  margin-right: 10px;
}

.stat-info .stat-number {
  font-size: 14px;
  font-weight: bold;
  color: #00ffff;
}

.stat-info .stat-label {
  font-size: 15px;
  color: #ffffff;
}

/* 动画图标 */
.animateIcon {
  animation: iconAnimation 2s infinite;
}

@keyframes iconAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 左侧按钮样式 */
.sidebar {
  position: absolute;
  top: 160px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 10;
}

.sidebar button {
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%; /* 圆形 */
  background: rgba(26, 59, 139, 0.5); /* 透明蓝色背景 */
  color: #fff; /* 白色字体 */
  cursor: pointer;
  transition: all 0.3s;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sidebar button:hover {
  background: #1a3b8b; /* 稍浅的深蓝色 */
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.sidebar button:active {
  transform: translateY(0);
}

.sidebar button i {
  font-size: 24px;
  margin-bottom: 5px;
}

.sidebar button span {
  font-size: 12px;
  text-align: center;
}

/* 右侧面板 */
.right-panel {
  position: absolute;
  top: 100px;
  right: 20px;
  width: 180px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  padding: 15px;
  border-radius: 10px;
  z-index: 10;
}

.panel-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.drone-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drone-list li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
}

/* 底部信息样式 */
.footer {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: #fff; /* 白色背景 */
  color: #000 !important; /* 强制使用黑色字体 */
  font-size: 14px; /* 字体大小 */
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-weight: bold; /* 加粗字体 */
  backdrop-filter: none; /* 移除模糊效果 */
  border-top: 2px solid #e74c3c;
  margin-top: 20px;
  border-radius: 4px;
}
</style>
